<div>
  <ul id="template-tabs">
    <li class="nav-item">
      <a data-i18n="include.tab.home" class="nav-link active" data-toggle="tab" href="#sieve-widget-include" role="tab"></a>
    </li>
    <li class="nav-item">
      <a data-i18n="include.tab.advanced" class="nav-link" data-toggle="tab" href="#sieve-widget-advanced" role="tab"></a>
    </li>
    <li class="nav-item">
      <a data-i18n="include.tab.help" class="nav-link" data-toggle="tab" href="#sieve-widget-help" role="tab"></a>
    </li>
  </ul>

  <div id="template-content">
    <div class="tab-content m-2">
      <div class="tab-pane fade show active" id="sieve-widget-include" role="tabpanel">
        <div class="mb-3">
          <form class="was-validated" novalidate="novalidate">
            <label data-i18n="include.name"></label>
            <input data-i18n="include.name.placeholder" id="sivIncludeScriptName" type="text" class="form-control col-lg-8" required="required" />
            <div data-i18n="include.name.invalid" class="invalid-feedback"></div>
          </form>
        </div>

        <div class="form-check">
          <input type="checkbox" class="form-check-input" name="once" id="sivIncludeOnce" />
          <label class="form-check-label" for="sivIncludeOnce">
            <span data-i18n="include.once.label"></span>
            <p data-i18n="include.once.text" class="form-text"></p>
          </label>
        </div>

        <div class="form-check">
          <input type="checkbox" class="form-check-input" name="optional" id="sivIncludeOptional" />
          <label class="form-check-label" for="sivIncludeOptional">
            <span data-i18n="include.optional.label"></span>
            <p data-i18n="include.optional.text" style="white-space: pre-line" class="form-text"></p>
          </label>
        </div>

      </div>
      <div class="tab-pane fade" id="sieve-widget-advanced" role="tabpanel">
        <p data-i18n="include.storage"></p>
        <div class="form-check">
          <input type="radio" id="sivIncludePersonal" name="personal" value="true" class="form-check-input" />
          <label class="form-check-label" for="sivIncludePersonal">
            <span data-i18n="include.personal.label"></span>
            <p data-i18n="include.personal.text" class="form-text"></p>
          </label>
        </div>
        <div class="form-check">
          <input type="radio" id="sivIncludeGlobal" name="personal" value="false" class="form-check-input" />
          <label class="form-check-label" for="sivIncludeGlobal">
            <span data-i18n="include.global.label"></span>
            <p data-i18n="include.global.text" style="white-space: pre-line" class="form-text"></p>
          </label>
        </div>
      </div>
      <div data-i18n="include.help" class="tab-pane fade form-text" id="sieve-widget-help" role="tabpanel">
      </div>
    </div>
  </div>
</div>